<template>
	<view>
		<mc-framework navTitle="MES工控机" @changeLevel="changeLevel">

			<template #content>
				<view class="contentBox">
					<!-- <u-row customStyle="margin-bottom: 10px" class="u-row_view"> -->
					<u-row class="u-row_view">
						<u-col span="8">
							<view class="demo-layout bg-purple-light u-row_view_left">
								<text>管理部 现场 质管员巡查日报 </text>
								<text style="font-size: 12rpx;"> 检查时间：{{FBDate}}</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple  u-row_view_right"><text>Q/GY-QP034-05</text> </view>
						</u-col>
					</u-row>
					<view class="table">
						<table style="table-layout: fixed;">
							<tr>
								<th width='5%'>序号</th>
								<th width='6%'>质管员</th>
								<th width='6%'>巡检车间</th>
								<th width='16%'>现场情况描述</th>
								<th width='14%'>现场照片</th>
								<th width='8%'>要求</th>
								<th width='8%'>整改责任人</th>
								<th width='8%'>部门监督人</th>
								<th width='8%'>完成期限</th>
								<th>改进对策</th>
								<th width='6%'>备注次数</th>
							</tr>
							<tbody>
								<!-- <tr v-for="(item,index) in contents" :class="{ hovered: hoveredIndex === index }"> -->
								<tr v-for="(item,index) in contents">
									<td>{{index+1}}</td>
									<td>{{item.BillNO}}</td>
									<td>{{item.ProductName}}</td>
									<td><input type="text" /></td>
									<td style="text-align: center;">
										<u-upload style=" width: 50%;margin: auto;" :fileList="DImgs"
											@afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
											:previewFullImage="true"></u-upload>
									</td>
									<td>
										<uni-data-checkbox multiple v-model="item.FResult" :localdata="sexs" />
									</td>
									<td>{{item.OkAmount}}</td>
									<td>{{item.BadAmount}}</td>
									<td @click="addTime()">{{item.time}}</td>

									<td><input type="text" v-model="item.Resulttow" /></td>
									<td><input type="text" v-model="item.Result" /></td>
								</tr>
							</tbody>
						</table>

						<table style="table-layout: fixed;">
							<tr>
								<th width='11%'>姓名</th>
								<th width='11%'>楼兴娟</th>
								<th width='11%'>刘宝娣</th>
								<th width='11%'>崔颖</th>
								<th width='11%'>邵常清</th>
								<th width='11%'>王红利</th>
								<!-- <th colspan='2'>备注</th> -->
								<th width='34%'>备注</th>
							</tr>
							<tbody>
								<tr v-for="(item,index) in contentsTow">
									<!-- <tr v-for="(item,index) in contentsTow" @click="planIDClick(item,index)"
									:class="{ hovered: hoveredIndex === index }"> -->
									<td>{{item.title}}</td>
									<td>{{item.Result}}</td>
									<td>{{item.Result}}</td>
									<td>{{item.Result}}</td>
									<td>{{item.Result}}</td>
									<td>{{item.Result}}</td>
									<td rowspan='2'> <input type="text" v-model="item.Result" /></td>
									<!-- <td rowspan='2' colspan='2'>{{item.Result}}</td> -->
								</tr>
							</tbody>
						</table>

					</view>
				</view>

				<view class="bottomBtnsOne">
					<button block>
						保存
					</button>
				</view>

				<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false' @close="show=false"
					@confirm='pickerConfirm'></u-datetime-picker>

			</template>
		</mc-framework>
	</view>
</template>

<script>
	import {
		getFormatDateTime,
		getBefore7DateTime
	} from '@/mes/common/base.js';
	export default {
		data() {
			return {
				DImgs: [],
				serverIP: '',
				FBDate: '',
				show: false,
				value1: Number(new Date()),
				contents: [{
						time: '',
						Result: ''

					},
					{
						time: '',
						Result: ''
					},
					{
						time: '',
						Result: ''
					}
				],
				contentsTow: [{
						title: '巡检情况'

					},
					{
						title: '问题件数'
					},
				],
				sexs: [{
					text: '整改',
					value: 0
				}, {
					text: '评估',
					value: 1
				}, {
					text: '考核',
					value: 2
				}],
			};
		},
		onLoad(onlod) {
			let that = this;
			console.log(JSON.stringify(onlod));
			that.FBDate = getFormatDateTime(new Date())
			// that.FormData.FBDate = getBefore7DateTime()
			// that.FormData.FEDate = getFormatDateTime(new Date())
			that.contents.map(item => {
				item.time = getFormatDateTime(new Date())
			})
		},
		onBackPress(options) { // 监听页面返回
			if (options.from == 'navigateBack') { // 通过点击路由返回
				return false;
			} else if (options.from == 'backbutton') { // 通过外置返回
				return true;
			}
		},
		methods: {
			deletePic(event) {
				this.DImgs.splice(event.index, 1);
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				console.log(event);
				let fileListLen = this.DImgs.length;
				lists.map((item) => {
					this.DImgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.DImgs[fileListLen]
					this.DImgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://' + that.Request
							.serverIP() + '/Frame/uploadFile?dirName=' + '巡查日报',
						filePath: url,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data' // 必须设置
						},
						formData: {
							user: 'test'
						},
						success: (uploadFileRes) => {
							const data = JSON.parse(uploadFileRes.data);
							// console.log(data);
							resolve(data.data)
						}
					});
				})
			},
			pickerConfirm(e) {
				let that = this;
				var time = getFormatDateTime(e.value)
				that.contents.map(item => {
					item.time = time
				})
				this.show = false
			},
			addTime() {
				this.show = true
			},
			planIDClick(item, index) {
				let that = this;
				that.hoveredIndex = index; // 设置当前hover的tr索引  
			},
			changeLevel(data, row) {
				let routes = getCurrentPages(); //当前页面栈
				console.log(routes.length);
				let backIndex = routes.length - row.length; // 计算返回页面栈数
				uni.navigateBack({
					delta: backIndex
				})

			},
		}
	}
</script>

<style lang="scss">
	@import "../css/index.css";

	::v-deep.uni-data-checklist .checklist-group {
		display: block !important;
	}

	.bottomBtnsOne {
		bottom: 6vh;
	}

	.u-upload__button {
		width: 50rpx !important;
		height: 50rpx !important;
		margin: 0 !important;
	}

	.u-upload__wrap__preview {
		width: 50rpx !important;
		height: 50rpx !important;
		margin: 0 !important;
	}

	.u-row_view {
		background-color: #fff;
		padding: 5px 10px 0 10px 0;
		// padding-bottom: 0;

		.u-row_view_right {
			text-align: center;
			font-size: 10rpx;
		}

		.u-row_view_left {
			font-size: 18rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.table table {
		// table-layout: fixed;

		tr td {
			input {
				width: 100%;
				background-color: #e7e7e7 !important;

			}

			// view {
			// 	width: 100%;
			// 	height: 100%;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	font-size: 10rpx;
			// }
		}

	}
</style>